<template>
  <div class="home" @scroll="scroll">
    <swiper></swiper>
    <mulu></mulu>
    <whole></whole>
    <special></special>
    <hits></hits>
    <headers v-show="show" class="fixed"></headers>
  </div>
</template>

<script>
import swiper from "../components/Home/swiper.vue";
import mulu from "../components/Home/mulu.vue";
import whole from "../components/Home/whole";
import special from "../components/Home/special";
import hits from "../components/Home/hits";
import headers from "../components/Header/headers";
export default {
  components: { swiper, mulu, whole, special, hits, headers },
  data() {
    return {
      show: false,
    };
  },
  mounted() {},
  methods: {
    scroll(e) {
      this.show = e.target.scrollTop > 500 ? true : false;
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 90%;
  overflow: auto;
  .fixed {
    position: fixed;
    top: 0;
    left: 0;
  }
}
</style>
